import React from 'react';

import { message,Upload,Icon } from 'antd';

/**
 *  婚礼标签
 *
 * @class WedPage
 * @extends {Component}
 */
class WedPage extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            listData:this.props.wedTypeListData.data || [],
        }
    }

    componentDidMount(){
        const { fatchWedType } = this.props;
        fatchWedType({});
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.wedTypeListData.data){
            this.setState({
                listData:nextProps.wedTypeListData.data
            })
        }
    }

    wedTagCtrl(key,id){
        const data = {
            tag_id:id
        }
        const { fatchHandleWedTag,fatchWedType } = this.props;
        data.type = key === 3 ? 3 : (key == 0 ? 1 : 2);
        fatchHandleWedTag(data).then((res)=>{
            if(res.code == 200){
                message.success('操作成功！');
                fatchWedType({});
            }
        })
    }

    addRow = ()=>{
        let { listData } = this.state;
        listData.unshift({
            name:'',
            img:'',
            is_show:1,
        });
        this.setState({
            listData:listData
        })
    }

    editRow(i,id){
        const { fatchUpdateWedTag,fatchCreateWedTag,fatchWedType } = this.props;
        let { listData } = this.state;
        const item = listData[i];
        function resData(res){
            if(res.code == 200){
                message.success('操作成功！');
                fatchWedType({});
            }
        }
        if(!!item.putIn){
            let data = {
                name:item.name,
                img:item.img
            }
            if(item.id){
                data.tag_id = id;
                fatchUpdateWedTag(data).then((res)=>{
                    resData(res);
                })
            }else{
                data.type_id = 5;
                fatchCreateWedTag(data).then((res)=>{
                    resData(res);
                })
            }
        }else{
            item.putIn = true;
            this.setState({
                listData:listData
            })
        }
    }

    nameChangeHandle(e,i){
        let { listData } = this.state;
        listData[i].name = e.target.value;
        this.setState({
            listData:listData
        })
    }

    uploadHandle(info,i){
        let { listData } = this.state;

        if (info.file.status === 'uploading') {
            listData[i].loading = true;
            this.setState({listData});
            return;
        }
        if (info.file.status === 'done') {
            listData[i].img = info.file.response && info.file.response.data.file.url;
            listData[i].loading = false;
            listData[i].imgShow = true;
            this.setState({listData})
        }

    }

    render(){
        const { listData } = this.state;
        const uploadProps = {
            action:'http://192.168.1.201/wedding.com/index.php/merchant/index/uploadImg',
            showUploadList:false,
        }
        const imgState = (item)=>(
            <div className="center-box">
                {
                    item.loading ? <Icon type='loading' /> : <img className="w200 h50" src={item.img} alt=""/>
                }
            </div>
        )
        return(
            <div className="wedding-type bcf">
                <table>
                    <thead>
                        <tr className="bcf">
                            <th className="w100">序号</th>
                            <th className="w490">添加名字(限5字)</th>
                            <th className="w540">图片</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            listData && listData.map((item,i)=>(
                                <tr key={i}>
                                    <td>{i+1}</td>
                                    <td>
                                        {
                                            item.putIn == true ?
                                            <input autoFocus="true"
                                                value={item.name}
                                                placeholder=""
                                                type="text"
                                                className="form-control w150"
                                                onChange={(e)=>this.nameChangeHandle(e,i)}/>
                                            :   <span>{item.name}</span>
                                        }
                                    </td>
                                    <td>
                                        {
                                            item.putIn == true ? <Upload {...uploadProps} onChange={(info)=>this.uploadHandle(info,i)}>
                                                {
                                                    item.imgShow === true ? imgState(item)
                                                    :   <button className="bt w150 h40 f16 pr" id="">
                                                        {item.loading ? <Icon type='loading' /> : '点击上传'}</button>
                                                }
                                                </Upload>
                                            :   imgState(item)
                                        }
                                    </td>
                                    <td>
                                        <button className="bt w100 h40 f14" onClick={()=>this.editRow(i,item.id)}>
                                            {
                                                item.putIn == true ? '保存' : '编辑'
                                            }
                                        </button>
                                        <button className="bt w80 h40 f14 ml20" onClick={()=>this.wedTagCtrl(item.is_show,item.id)}>
                                            {item.is_show == 1 ? '隐藏' : '显示'}</button>
                                        <button className="bt w80 h40 f14 ml20" onClick={()=>this.wedTagCtrl(3,item.id)}>删除</button>
                                    </td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
                <div className="center-end mt40">
                    <button className="bt w120 h40 f18" onClick={this.addRow}>+ 添加</button>
                </div>
            </div>
        )
    }
}

export default WedPage;